
<style  rel="stylesheet/scss" lang="scss" scoped>
	.ult-box{
		position: relative;
		width: 100%;
		height: 100%;
		display: flex;
		padding-bottom: 100px;
		flex-direction: column;
		.ult-box_bsm{
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			font-size: 14px;
			padding: 10px;
			img{
				width: 85px;
				height: 65px;
				margin-right: 10px;
			}
			div{
				flex: 1;
				display: flex;
				flex-direction: column;
			}
		}
		.ult-box_tj{
			width: 100%;
			height: 30px;
			line-height: 30px;
			font-size: 14px;
			padding-left: 10px;
			border-top: 1px solid #E5E5E5;
			border-bottom: 1px solid #E5E5E5;
		}
		.ult-box_pro{
			width: 100%;
			display: flex;
			flex: 1;
			height: 100%;
			flex-direction: column;
			overflow: auto;
			background: #fff;
			li{
				width:100%;
				display:flex;
				flex-direction:column;
				box-sizing:border-box;
				padding:2px 5px;
				border-bottom:1px solid #e5e5e5;
				.pro-name{
					width: 100%;
					height: 20px;
					line-height: 20px;
					text-align: right;
					font-size: 14px;
					color: #FF0000;
					padding-right: 10px;
					box-sizing: border-box;
				    -webkit-margin-before: 0em;
					-webkit-margin-after: 0em;
				}
				.pro-park{
					width: 100%;
					display: flex;
					align-items: center;
					img{
						width: 45px;
						height: 45px;
						margin: 5px 10px;
					}
				}
				.pro-desc{
					flex:1;
					display:flex !important;
					flex-direction:column;
					justify-content:center;
					font-size:14px;

				}
				.text-overflow__2{
					overflow:hidden;
					text-overflow:ellipsis;
					word-wrap:break-word;
					display:-webkit-box;
					-webkit-line-clamp:2;
					-webkit-box-orient:vertical;

				}
				.pro-handle{
					width:100px;
					height:50px;
					display:flex;
					align-items:center;
					justify-content:space-around;
					.text-14{
						font-size: 25px;
						color: #1973BF;
					}
					.hand-num{
						font-size: 14px;
						line-height: 40px;
					}

				}
			}
		}
		.order-footer{
			width:100%;
			z-index:10;
			height:50px;
			background:#fff;
			position:fixed;
			bottom:0px;
			left:0px;
			right:0px;
			display:flex;
			border-top:1px solid #e5e5e5;
			.prd{
				width:75px;
				height:100%;
				display:flex;
				justify-content:center;
				font-size:30px;
				align-items:center;
				position:relative;
				i{
					font-size: 30px;
				}
				.dot{
					position:absolute;
					width:24px;
					height:24px;
					top:0px;
					right:10px;
					border-radius:50%;
					font-size:14px;
					color:#fff;
					display: flex;
					align-items: center;
					justify-content: center;
					background:#e51c23;
					text-align:center;

				}

			}
			.price{
				width:90px;
				height:100%;
				display:flex;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:relative;
				font-size:16px;
				color: #FF9800;
				flex-direction:column;

			}
			.order-footer_c{
				background:#FF9800;
				display:flex;
				flex:1;
				align-items:center;
				justify-content:center;

			}
			.order-footer_l{
				background:#E51C23;
				flex:1;
				display:flex;
				align-items:center;
				justify-content:center;

			}
			.order-footer_c,.order-footer_l {
				color:#fff;
				font-size:14px;
			
			}
		}
		/*弹窗css*/
		.bg_shop{
		  display: flex;
		  position: fixed;
		  bottom: 50px;
		  z-index: 9;
		  background-color: rgba(0, 0, 0, 0.498039);
		  height: 100%;
		  width: 100%;
		}
		.bg_shop_none {
			animation: myfirst2 0.5s;
		}
		@keyframes myfirst2 {
			from {
		  	display: flex;
		  }
		  to {
		    display: none;
		  }
		}
		.modiaBoxUp {
		  position: fixed;
		  bottom: 50px;
		  animation: myfirst 0.5s;
		  -moz-animation: myfirst 0.5s;
		  /* Firefox */
		  -webkit-animation: myfirst 0.5s;
		  /* Safari and Chrome */
		  -o-animation: myfirst 0.5s;
		  /* Opera */
		}
		@keyframes myfirst {
		  from {
		   bottom: 1px
		  }
		
		  to {
		  	bottom: 50px
		  }
		}
		.modiaBoxDown {
		  position: fixed;
		  bottom: -100%;
		  animation: myfirst1 0.5s;
		}
		@keyframes myfirst1 {
		  from {
		    bottom: -51px;
		  }
		
		  to {
		    bottom: -50%;
		    display: none;
		  }
		}
		.s-layer{
			width: 100%;
			background-color: #fff;
		}
		.shop-list{
			width:100%;
			height:auto;
			display:flex;
			flex-direction:column;
			.ite{
				width:100%;
				height:40px;
				line-height:40px;
				background:#fff;
				font-size:14px;
				display:flex;
				padding:0 10px;
				position: relative;
				box-sizing:border-box;
				border-bottom:1px solid #e5e5e5;
				.ite-va{
					flex:1;
					text-align:right;
					padding-right:35px;
					>span{
						margin-right: 15px;
					}

				}
				.icon-shanchu{
					color: #999;
				}

			}
		}
	}
	
</style>
<template>
	<div class="ult-box">
		<div class="ult-box_bsm" v-if="carInfo">
			<img :src="carInfo.icon"/>
			<div>
				<span>{{carInfo.brandName}} {{carInfo.seriesName}}</span>
				<span>{{carInfo.modelName}}</span>
			</div>
		</div>
		<div class="ult-box_tj">推荐配件</div>
		<ul class="ult-box_pro" v-if="goodsList && goodsList.length>0">
			<li class="itme" v-for="(item, index) in goodsList" :key="index" @click="goDetail(item)">
				<p class="pro-name">￥{{item.memberPrice}}</p>
				<div class="pro-park">
					<img :src="item.logoUrl"/>
					<div class="pro-desc text-overflow__2">
						<span>{{item.goodsName}}</span>
						<span>{{item.goodsModelNumber}}</span>
					</div>
					<div class="pro-handle">
						<span class="iconfont icon-jian1 text-14" @click.stop.prevent="reductNumFn(item)"></span>
						<span class="hand-num">{{item.num}}</span>
						<span class="iconfont icon-jia2 text-14" @click.stop.prevent="addNumFn(item)"></span>
					</div>
				</div>
			</li>
		</ul>
		<div class="order-footer">
			<div class="prd" @click="showLayer">
				<i class="iconfont icon-gouwuchexiantiao"></i>
				<span class="dot">{{c_culate_shopNum}}</span>
			</div>
			<div class="price">￥{{c_culate_total}}</div>
			<div class="order-footer_c" @click="addCart">加入购物车</div>
			<div class="order-footer_l" @click="goSettle">立即购买</div>
		</div>
		<!--
        	作者：1433469126@qq.com
        	时间：2018-07-18
        	描述：弹窗
        -->
        <div :class="{'bg_shop': model, 'bg_shop_none': !model}" @click="showLayer">
        	<div class="s-layer" :class="{'modiaBoxUp': model, 'modiaBoxDown': !model}">
        		<div class="shop-list">
        			<template v-for="(item, index) in goodsList">
	        			<div class="ite" v-if="item.select">
	        				<div>{{item.goodsName}}</div>
	        				<div class="ite-va"> 
				            	<span>{{item.num}}件</span>  
				            	共￥{{item.num*item.memberPrice}}
				          	</div>
				          	<span class="iconfont icon-shanchu" @click.stop.prevent="deleteItem(item)"></span>
	        			</div>
        			</template>
        		</div>
        	</div>
        </div>
	</div>
</template>

<script>
	import { MessageBox,Toast} from "mint-ui";
	export default {
		data() {
			return {
				carInfo: [],
				model: false,
				goodsList: []
			}
		},
		mounted() {
			document.title = "匹配结果";
		},	
		created() {
			// 获取品牌信息
			this.getCarInfo()	
			let attr = window.localStorage.getItem('linklist')?JSON.parse(window.localStorage.getItem('linklist')): ''
			console.log(attr)
			attr ? this.goodsList = attr : this.getclinklist()

		},
		methods: {
			goDetail(item) {
				 this.$router.push(
	              "/productdetail?id=" +
	                item.goodsId +
	                "&carId=" +
	                window.localStorage.getItem('carId')
	                
	            )
			},
			// 跳转下单页面
			goSettle() {
				if(!this.$store.getters.getLoginStatus.userId) {
					this.$router.push("/login");
					return;
				}
				let attr = this.goodsList.filter((item) => {return item.select})
				if(!attr.length){
					Toast({
			            message: "请选择商品",
			        })
					return
				}
				this.handleModel(this.goodsList)
				window.localStorage.setItem('linklist', JSON.stringify(this.goodsList))
				this.$router.push({
		          	name: "settle",
		          	query: {
			            pagetype: "min",

		          	}
		        });
			},
			// 加入购物车
			addCart() {
				let attr = this.goodsList.filter((item) => {return item.select})
				if(!this.$store.getters.getLoginStatus.userId) {
					this.$router.push("/login");
					return;
				}
				
				if(!attr.length){
					Toast({
			            message: "请选择商品",
			        })
					return
				}
				let self = this;
				let url = this.$baseUrl.bizUrl + "/shopcart/addnew";
		      	let modelId =  window.localStorage.getItem('carId');
		      	console.log(this.handleModel(this.goodsList))
		      	let data = {
		      		model: this.handleModel(this.goodsList),
		      		contentType: true,
			        token: this.$store.getters.getLoginStatus.token,
					userId: this.$store.getters.getLoginStatus.userId
		      };
		      let callBack = res => {
			        if (res == null) {
			          console.log("网络请求错误！");
			          return;
			        }
			        if (res.data.status != 200) {
			          console.log("请求数据错误" + url);
			          return;
			        }
			        if (res.data.status === 200) {
			          	console.log(res)
  						MessageBox.confirm(
							'加入购物车成功',
							'',
							{cancelButtonText:'去购物车',confirmButtonText: '继续添加'}
							).then(action => {

							}).catch(err => {
								console.log(err)
								this.$router.push('/cart');
							})

			        }
		      	}
		      	this.$reqFormPost(url, data, callBack)
				
				
			},
			handleModel(list) {
				let attr = []
			    list.forEach((item) => {
			    	if(item.select) {
				      let obj = {
				        'goodsId': item.goodsId,
				        'goodsNum': item.num,
				        'skuId': item.skuId
				      }
				      attr.push(obj)
			    	}
			    })	
			    console.log(attr)
			    window.localStorage.setItem('goodsVo', JSON.stringify(attr))

			    return attr
			},
			showLayer() {
				let attr = this.goodsList.filter((item) => {return item.select})
				if(!attr.length){

//					MessageBox.confirm(
//						'加入购物车成功',
//						'',
//						{cancelButtonText:'去购物车',confirmButtonText: '继续添加'}
//						).then(action => {
//						console.log(action)
//					});
					Toast({
			            message: "请添加商品",
			        })
					return
				}
				this.model = !this.model
			},
			getCarInfo() {
				let self = this;
				let url = this.$baseUrl.sizUrl + "/bsm";
		      	let modelId =  window.localStorage.getItem('carId');
		      	let data = {
			        modelId: modelId,
			        merchantId: this.$store.getters.getMerchant.merchantId,
			      };
		      	let callBack = res => {
			        if (res == null) {
			          console.log("网络请求错误！");
			          return;
			        }
			        if (res.data.status != 200) {
			          console.log("请求数据错误" + url);
			          return;
			        }
			        if (res.data.status === 200) {
			          console.log(res)
			          this.carInfo = res.data.data
			        }
		      	}
		      	this.$reqFormPost(url, data, callBack)
			},
			getclinklist() {
				let modelId =  window.localStorage.getItem('carId');
				let data = {
					carId: modelId,
					userId: this.$store.getters.getLoginStatus.userId,
					merchantId: this.$store.getters.getMerchant.merchantId,
				}
				let url = this.$baseUrl.bizUrl + "/goods/front/gclinklist";
				let callBack = res => {
			        if (res == null) {
			          console.log("网络请求错误！");
			          return;
			        }
			        if (res.data.status != 200) {
			          console.log("请求数据错误" + url);
			          return;
			        }
			        if (res.data.status === 200) {
			          console.log(res)
			          res.data.data.goodsDetailList.forEach((item) => {
			          	item.num = 0
			          	item.select = false
			          })
			          this.goodsList = res.data.data.goodsDetailList
			        }
		      	}
				this.$reqFormPost(url, data, callBack)
			},
			// 减操作
			reductNumFn(item) {
				if(!item.num) return
				item.num -= 1
				if(!item.num){
					item.select = false
				}
				console.log(item.num)
			},
			// 加操作
			addNumFn(item) {

				item.num += 1
				item.select = true
			},
			deleteItem(item) {
				item.select = false
				item.num = 0
				let attr = this.goodsList.filter((item) => {return item.select})
				if(!attr.length) {
					this.model = false
				}
			}
		},
		computed:{
			// 计算购物车数量
			c_culate_shopNum() {
				let num = 0;
				if(this.goodsList.length > 0) {
					 this.goodsList.forEach((item) => {
						num+= item.num
					})
				}
				return num
			},
			// 计算总价
			c_culate_total() {
				let total = 0;
				if(this.goodsList.length > 0) {
					 this.goodsList.forEach((item) => {
						total+= parseFloat(item.num * item.memberPrice)
					})
				}
				return total.toFixed(2)
			}
		}
	}
</script>
